Angular17 載入 Material Symbols 發生 SASS 無法解析 CSS
這篇文章在處理 Angular 安裝 CSS 相關套件時，發生 SASS 無法解析 CSS，而開啟套件資料夾，可以看見相關無法解析的內容已經下載在專案中。出現此項錯誤，身為新手的筆者，往往因為這載入就發生錯誤，就歸咎版本不相容，或套件沒有跟上最新框架版本，都是它們的錯，然後就放棄這個套件。但，人生就是這麼多 BUT。在工作上有提出使用新版 Angular 進行開發的概念，需要筆者先試行少部分功能，還是只能矇頭解決...，下面就開始解決歷程吧。
node_modules 檔案樣態
錯誤樣式 X [ERROR] Could not resolve "./material-symbols-outlined.woff2" [plugin angular-css-resource] ...
錯誤代碼形式
# terminal
...
> ng serve
Application bundle generation failed. [2.265 seconds]
X [ERROR] Could not resolve "./material-symbols-outlined.woff2" [plugin angular-css-resource]
src/styles.scss:12365:11:
12365 │ src: url("./material-symbols-outlined.woff2") format("woff2");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Preprocessor stylesheets may not show the exact file location of the error.
X [ERROR] Could not resolve "./material-symbols-rounded.woff2" [plugin angular-css-resource]
src/styles.scss:12390:11:
12390 │ src: url("./material-symbols-rounded.woff2") format("woff2");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
12415 │ src: url("./material-symbols-sharp.woff2") format("woff2");
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Preprocessor stylesheets may not show the exact file location of the error.
Watch mode enabled. Watching for file changes...
出現這樣的原因是因為 SASS 並無原生的 URL 的改寫功能，而引用套件的字體路徑是通過 SASS 變數動態產生，所以導致建構時無法正確解析字體路徑。material-symbols 套件提供了 $material-symbols-font-path 變數，在提供此變數情況下，則無須透過上述方式產生字體路徑。
完整設定步驟
Step1: 安裝 material-symbols
# terminal
npm i material-symbols
Step2: 套件載入 Angular 專案
# src/styles.scss
...
//$material-symbols-font-path: '../node_modules/material-symbols/';
@import 'material-symbols';
...
經上述步驟即可完成 Material Symbols 套件載入。此外筆者也在網路上找到另一篇解決方式，將附於第一篇參考資料中，但本著不懂的內容盡量維持原設定與觀察編譯速度後，選擇了上述方法。
Material Symbols 預設線條 Icon 改為實心 Icon
可順利使用 Material Symbols 後，發現預設 Icon 都是線條 Icon，有時部分需要調整為實心 Icon，此時就要利用 style 中的 font-variation-settings ，font-variation-settings 提供了四個控制屬性，FILL 實心狀態、wght 線條粗細、GRAD 線條視覺平衡與 opsz 大小。
- FILL 實心狀態: 0: 線條 Icon ，1: 實心 Icon
- wght 線條粗細: (100 ~ 700) 常以 100 整數倍設定，數字越大線條越粗，影響 Icon 整體大小。
- GRAD 線條視覺平衡: (-25、0、200) 與 wght 相同，但效果較不顯著。
- posz RWD 線條調整: (20dp ~ 48 dp) 線條粗細依 Icon 大小改變。
由於筆者美感感知力不足，因此還是只會使用 FILL 來控制 Icon。
範例程式
example.html
# example.html
...
<div class="custom-icon">
<span class="material-symbols-outlined">key</span>
</div>
...
example.scss
# example.scss
...
.custom-icon {
font-variation-settings: 'FILL' 1, 'WDTH' 100, ...;
}
...
